<template>
	<view class="container">
		<fu-navbar title="历史记录" bgColor="#0f68f0" color="#fff"></fu-navbar>
		<view class="shaixuan">
			<image src="../../../static/images/icon17.png" mode="aspectFill" @click="isShow = !isShow"></image>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
				<view class="urgent">
					<image src="../../../static/images/icon18.png" mode="aspectFill" class="u-icon" v-if="item.urgencyLevel == 1 || item.urgencyLevel == 2"></image>
					<image src="../../../static/images/icon19.png" mode="aspectFill" class="u-icon" v-else></image>
					<text>{{item.urgencyLevelName}}</text>
				</view>
				<view class="orderNo text-ellipsis">维修单号：{{item.workOrderCode}}</view>
				<view class="order-con">
					<view class="con">设备编号：{{item.emName}}</view>
					<view class="con">设备位置：121343</view>
					<view class="con">故障类别：{{item.repFaultTypeName}}</view>
					<view class="con">故障描述：{{item.repDesc}}</view>
				</view>
				<view class="bottom">
					<view class="left">{{item.employeeName}} {{item.createTime}}</view>
					<view class="right">
						<image src="../../../static/images/label-2.png" class="bg" mode="widthFix"></image>
						<text>{{item.repState == 1 ? '失效' : item.repState == 2 ? '待审核' : item.repState == 3 ? '待领取' : item.repState == 4 ? '拒单' : item.repState == 5 ? '转交' : item.repState == 6 ? '已分配' : item.repState == 7 ? '维修中' : item.repState == 8 ? '暂停' : item.repState == 9 ? '待指派' : item.repState == 10 ? '待验收' : item.repState == 11 ? '验收通过' : ''}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="list.length > 5"></uni-load-more>
		
		<!-- 空数据显示 -->
		<fu-empty-ui emptyImage="collection" v-if="list.length == 0 && isInit"></fu-empty-ui>
		
		<!-- 筛选弹窗 -->
		<fu-popup mode="bottom" v-model="isShow">
			<view class="popup-box">
				<view class="title">选择筛选条件</view>
				<view class="content">
					<input placeholder="输入单据编号" placeholder-class="pla-ipt" class="ipt" v-model="workOrderCode" />
					<view class="name">紧急程度</view>
					<view class="flex chengdu">
						<view class="item" :class="{'item-active': urgencyLevel == item.dictValue}" v-for="(item, index) in typeList" :key="index" @click="selType(item)">{{item.dictName}}</view>
					</view>
					<view class="name">时间</view>
					<view class="data-wrap flex justify-start align-center">
					  <view class="data-start data-box flex justify-between align-center" @click="isCalShow('start')">
					    <view class="data-time">
					      {{start_time ? start_time : '起始时间'}}
					    </view>
					    <view class="data-img">
					      <image src="../../../static/images/icon20.png" mode="widthFix"></image>
					    </view>
					  </view>
					  <view class="data-to">
					    -
					  </view>
					  <view class="data-end data-box flex justify-between align-center" @click="isCalShow('end')">
					    <view class="data-time">
					      {{end_time ? end_time : '结束时间'}}
					    </view>
					    <view class="data-img">
					      <image src="../../../static/images/icon20.png" mode="widthFix"></image>
					    </view>
					  </view>
					</view>
				</view>
				<view class="pop-bottom">
					<view class="left" @click="toReset">重置</view>
					<view class="btn" @click="finish">完成</view>
				</view>
			</view>
		</fu-popup>
		
		<!-- 日历弹窗 -->
		<fu-popup v-model="calShow" mode="center" border-radius="16" :mask-close-able="true">
		  <u-calendar
		  :insert="true"
		  @change="change"
		  ></u-calendar>
		</fu-popup>
	</view>
</template>

<script>
import fuNavbar from '@/components/fu-navbar/fu-navbar.vue';
import fuPopup from '@/components/fu-popup/fu-popup.vue';
import uCalendar from '@/components/u-calendar/uni-calendar.vue';
import fuEmptyUi from '@/components/fu-empty-ui/fu-empty-ui.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		fuNavbar,
		fuPopup,
		uCalendar,
		fuEmptyUi,
		uniLoadMore
	},
	data() {
		return {
			tabs: [],
			list: [],
			current: 0,
			isShow: false,
			calShow: false,
			start_time: '',
			end_time: '',
			calType: '',
			isInit: false,
			page: 1,
			workOrderCode: '',
			typeList: [],
			urgencyLevel: '', //紧急程度
			status: 'more',
			state: 11
		}
	},
	onLoad() {
		this.getList();
		this.getType();
	},
	onPullDownRefresh() {
		this.status = 'more';
		this.page = 1;
		this.getList();
	},
	onReachBottom() {
		if (this.status == 'more') {
			this.getList();
		}
	},
	methods: {
		tabChange(e, i) {
			this.current = i
		},
		isCalShow(e) {
			this.calType = e
			this.calShow = true
		},
		change(e) {
			if (this.calType == 'start') {
				this.start_time = e.fulldate
			} else {
				this.end_time = e.fulldate
			}
			this.calShow = false
		},
		toReset() {
			this.workOrderCode = ''
			this.urgencyLevel = ''
			this.start_time = ''
			this.end_time = ''
		},
		finish() {
			this.status = 'more';
			this.page = 1;
			console.log(12112)
			this.getList(); 
			this.isShow = false
		},
		// 查询紧急程度
		getType() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_URGENCY_LEVEL'
			}).then(res => {
				if (res.data.code == 9100) {
					this.typeList = res.data.info
				}
			})
		},
		// 选择类型
		selType(e) {
			this.urgencyLevel = e.dictValue
		},
		getList() {
			if (this.status != 'more') return;
			this.status = 'loading';
			this.$api.post(global.apiUrls.getPendingList, {
				pageNum: this.page,
				pageSize: 15,
				repState: 11,
				urgencyLevel: this.urgencyLevel,
				workOrderCode: this.workOrderCode,
				startTime: this.start_time,
				endTime: this.end_time
			}).then(res => {
				if (res.data.code == 9100) {
					console.log(res.data)
					let total = res.data.info.total
					let data = res.data.info.rows
					if (this.page == 1) this.list = [];
					this.list = this.list.concat(data)
					if (this.list.length < total) {
						this.status = 'more';
						this.page++;
					} else {
						this.status = 'noMore';
					}
				}
				this.isInit = true;
				uni.stopPullDownRefresh();
			}).catch(() => {
				uni.stopPullDownRefresh();
			})
		},
		toDetail(e) {
			if (e.repState == 7) {
				uni.navigateTo({
					url: `/pages/service/order-detail/my-order?repState=${e.repState}&repId=${e.repId}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/service/order-detail/index?repState=${e.repState}&repId=${e.repId}&state=${this.state}`
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f3f5f8;
}
.shaixuan {
	padding: 24rpx;
	display: flex;
	justify-content: right;
	image {
		width: 56rpx;
		height: 56rpx;
	}
}
.list {
	padding: 0 24rpx;
	overflow: hidden;
	.item {
		background-color: #fff;
		padding: 0 32rpx;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		position: relative;
		.urgent {
			position: absolute;
			top: 12rpx;
			right: 12rpx;
			display: flex;
			align-items: center;
			.u-icon {
				width: 42rpx;
				height: 42rpx;
				margin-right: 8rpx;
			}
			text {
				color: #f85d76;
				font-size: 26rpx;
			}
		}
		.orderNo {
			font-weight: bold;
			font-size: 32rpx;
			padding: 24rpx 70rpx 24rpx 0;
			border-bottom: 1rpx solid #f2f2f2;
		}
		.order-con {
			padding: 16rpx 0;
			border-bottom: 1rpx solid #f2f2f2;
			.con {
				font-size: 32rpx;
				line-height: 46rpx;
			}
		}
		.bottom {
			padding: 10rpx 0;
			display: flex;
			align-items: center;
			.left {
				font-size: 28rpx;
				color: #8d8d8d;
				flex: 1;
			}
			.right {
				flex-shrink: 0;
				position: relative;
				height: 52rpx;
				padding-left: 16rpx;
				width: 146rpx;
				box-sizing: border-box;
				text-align: center;
				.bg {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto 0;
					z-index: 0;
				}
				text {
					position: relative;
					font-size: 26rpx;
					color: #fff;
					z-index: 2 !important;
					line-height: 52rpx;
				}
			}
		}
	}
}

.popup-box {
	background-color: #fff;
	.title {
		text-align: center;
		padding: 24rpx 0;
	}
	.content {
		padding: 0 56rpx;
		border-bottom: 1rpx solid #f2f2f2;
	}
	.ipt {
		border: 1rpx solid #f2f2f2;
		padding: 24rpx;
		font-size: 28rpx;
	}
	.pla-ipt {
		color: #c1c1c1;
	}
	.name {
		font-size: 28rpx;
		padding: 24rpx 0;
	}
	.chengdu {
		flex-wrap: wrap;
		.item {
			width: calc(25% - 24rpx);
			margin-right: 32rpx;
			margin-bottom: 12rpx;
			border-radius: 5rpx;
			height: 76rpx;
			background-color: #f2f2f2;
			line-height: 76rpx;
			text-align: center;
			font-size: 28rpx;
			&:nth-of-type(4n) {
				margin-right: 0;
			}
		}
		.item-active {
			background-color: rgb(15, 104, 240);
			color: #fff;
		}
	}
	.data-wrap {
		padding-bottom: 24rpx;
	  box-sizing: border-box;
	  position: relative;
	  z-index: 11;
	
	  .data-to {
	    padding: 0 24rpx;
	  }
	  .data-time {
		  font-size: 28rpx;
		  color: #7a7a7a;
	  }
	
	  .data-box {
	    width: 245rpx;
	    height: 78rpx;
	    border: 1px solid #f2f2f2;
	    border-radius: 8rpx;
	    padding: 0 20rpx;
	    // box-sizing: border-box;
	
	    .data-img {
	      width: 30rpx;
	      height: 30rpx;
	      margin-top: -4rpx;
	
	      image {
	        width: 30rpx;
	        height: 30rpx;
	      }
	    }
	  }
	}
}
.pop-bottom {
	display: flex;
	align-items: center;
	padding: 12rpx 24rpx;
	font-size: 28rpx;
	justify-content: space-between;
	.left {
		width: 108rpx;
		text-align: center;
	}
	.btn {
		width: 160rpx;
		height: 56rpx;
		border: 1rpx solid #bfbfbf;
		text-align: center;
		line-height: 56rpx;
		border-radius: 56rpx;
	}
}
</style>